<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>music页面</title>
		<link rel="stylesheet" type="text/css" href="css/cube.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		
		<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
		<script src="js/init.js" type="text/javascript"></script>
		<script src="js/bootstrap.min.js" type="text/javascript"></script>
	</head>
	<body>
<!--	nav-->
	<nav class="navbar navbar-inverse" style="background: rgba(51,51,51,0.6);border:0;">
  		<div class="container">
  		  <ul class="head">
  			<li><a href="index.html"><span class="iconfont">&#xe602;</span></a></li>
  			<li><a href="mac.html">Mac</a></li>
  			<li><a href="iPad.html">iPad</a></li>
  			<li><a href="iPhone.html">iPhone</a></li>
  			<li><a href="watch.html">Watch</a></li>
  			<li><a href="#" style="opacity:0.65;">Music</a></li>
  			<li><a href="#">技术支持</a></li>
  			<li><a href="#"><span class="iconfont">&#xe601;</span></a></li>
  			<li id="gou"><a href="#"><span class="iconfont">&#xe60c;</span></a></li>
  		  </ul>
  		</div>
	</nav>
	
<!--head-->
	<header style="background:rgba(26,26,26,0.7);">
		<div class="shopping">
			<div class="sanjiao"></div>
			<p>你的购物袋是空的</p>
			<ul>
				<li><a href="#"><img src="images/bag.svg"/ style="margin-right:10px;">购物袋</a></li>
				<li><a href="#"><img src="images/favorites.svg"/ style="margin-right:10px;">收藏</a></li>
				<li><a href="#"><img src="images/orders.svg"/ style="margin-right:10px;">订单</a></li>
				<li><a href="#"><img src="images/account.svg"/ style="margin-right:10px;">账户</a></li>
				<li><a href="#"><img src="images/signIn.svg"/ style="margin-right:10px;">登录</a></li>
			</ul>
		</div>
		<div class="container mini">
		<ul class="picture" style="margin:0 180px;">
			<li><a href="#"><img src="images/apple.svg"/><br/>
				<span style="color:#fff;">Apple Music</a></li>
			<li><a href="#"><img src="images/itunes.svg"/><br/>
				<span style="color:#fff;">iTunes</span></a></li>
			<li><a href="#"><img src="images/ipod.svg"/><br/>
				<span style="color:#fff;">iPod</span></a></li>
			<li><a href="#"><img src="images/accessories.svg"/><br/>
				<span style="color:#fff;">Music 配件</span></a></li>
			<li><a href="#"><img src="images/gift.svg"/><br/>
				<span style="color:#fff;">App Store 充值卡</span></a></li>
		</ul>
		</div>
	</header>
<!--banner-->
	<div class="banner-music">
		<img src="images/family.jpg"/>
		<div class="music-page1">
			<img src="images/music_logo.png"/>
			<h1>乐不停。</h1>
			<p><a href="#" style="text-decoration:none;"><span type="button">开始三个月免费试用</span></a></p>
			<h3><a href="#">进一步了解 Apple Music</a>&nbsp;&gt;</h3>
		</div>
	</div>
<!--主体部分-->
	<div class=" body-music">
		<div class="container clearfix">
			<h1>Apple Music 火热呈献中</h1>
	<!--	第一张图-->
			<div class="row">
				<div class="col-lg-6 clearfix">
					<img class="pull-right" src="images/family-1.jpg"/><br>
				</div>
				<div class="col-lg-6 clearfix">
					<img class="pull-left" src="images/family-2.jpg"/>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-6 album">
					<h3>专辑</h3>
					<h2>艾德·希兰 - ÷ (Deluxe)</h2>
					<p><a href="#">立即开始免费试用以播放</a></p>
				</div>
				<div class="col-lg-6" style="padding-left:15px;">
					<h3>歌单</h3>
					<h2>徐佳莹的音乐小剧场：喜剧</h2>
					<p><a href="#">立即开始免费试用以播放</a></p>
				</div>
			</div>
<!--	第二张图-->
		<div class="row">
				<div class="col-lg-6 clearfix">
					<img class="pull-right" src="images/family-3.jpg"/><br>
				</div>
				<div class="col-lg-6 clearfix">
					<img class="pull-left" src="images/family-4.jpg"/>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-6 album">
					<h3>单曲</h3>
					<h2>Lana Del Rey - Love - Single</h2>
					<p><a href="#">立即开始免费试用以播放</a></p>
				</div>
				<div class="col-lg-6" style="padding-left:15px;">
					<h3>专辑</h3>
					<h2>Ty. - 1989</h2>
					<p><a href="#">立即开始免费试用以播放</a></p>
				</div>
			</div>
		</div>
	</div>
<!--第四张图-->
	<div class="music-page4">
		<div class="music-items4">
			<h2>AirPods</h2>
			<h1>无线，无繁琐，只有妙<br>不可言。</h1>
			<p><a href="#" style="color:#333;">进一步了解 AirPods</a>&nbsp;&gt;</p>
		</div>
		<img src="images/airpods_large.png"/>
	</div>
<!--第五张图-->
	<div class="music-page4" style="background:#FFF1DE;padding-top:156px;">
		<div class="music-items4">
			<h2>iPod</h2>
			<h1>你喜爱的音乐，随身<br>带着走。</h1>
			<p><a href="#" style="color:#333;">进一步了解 iPod</a>&nbsp;&gt;</p>
		</div>
		<img class="img-responsive" src="images/ipod.png"/>
	</div>
<!--第六张图-->
	<div class="music-page4" style="background:#E9F7F8;padding-top:123px;">
		<div class="music-items4">
			<h2>配件</h2>
			<h1>淋漓尽致，<br>绽放你的音乐。</h1>
			<p><a href="#" style="color:#333;">选购耳机和扬声器</a>&nbsp;&gt;</p>
		</div>
		<img class="img-responsive" src="images/accessories_large.png"/>
	</div>
<!--第七张图-->
	<div class="music-page4" style="background:#FCE7E3;padding-top:156px;">
		<div class="music-items4">
			<h2>iTunes</h2>
			<h1>你的私人音乐游<br>乐园。</h1>
			<p><a href="#" style="color:#333;">进一步了解iTunes</a>&nbsp;&gt;<br>
				<a href="#" style="color:#333;">下载iTunes</a>&nbsp;&gt;</p>
		</div>
		<img class="itune" src="images/itune.png"/>
	</div>
<!--第八张图-->
	<div class="music-page4" style="background:#FCEFFC;padding-top:58px;">
		<div class="music-items4">
			<h2>App Store 充值卡</h2>
			<h1>为精彩游戏和 App 更添惊喜。</h1>
			<p><a href="#" style="color:#333;">进一步了解iTunes</a>&nbsp;&gt;<br>
				<a href="#" style="color:#333;">下载iTunes</a>&nbsp;&gt;</p>
		</div>
		<img class="gift" src="images/gift_cards.png"/>
	</div>
<!--第九张图-->
	<div class="container work">
		<h1>多款出色的音乐创作 App，出自 Apple。</h1>
		<img src="images/apps_large.jpg"/>
		<div class="row write">
			<div class="col-lg-3">
				<img src="images/music.png"/>
				<h2>音乐备忘录</h2>
				<h3>轻点手指，捕捉所有音乐灵感，<br>随后将它们转变为佳作。</h3>
				<p><a href="#">进一步了解&nbsp;</a><br><a href="#">音乐备忘录</a>&nbsp;&gt;</p>
			</div>
			<div class="col-lg-3">
				<img src="images/apps_garage.png"/>
				<h2>GarageBand</h2>
				<h3>以种类丰富的乐器，在 Mac、<br>iPad、iPhone 或 iPod touch<br>上创作你的音乐。</h3>
				<p><a href="#">进一步了解&nbsp;</a><br><a href="#">GarageBand</a>&nbsp;&gt;</p>
			</div>
			<div class="col-lg-3">
				<img src="images/pro_logicpro2.png"/>
				<h2>Logic Pro X</h2>
				<h3>使用 Mac 上装备齐全的专业录<br>音室，助你成就惊世之作。</h3>
				<p><a href="#">进一步了解&nbsp;</a><br><a href="#">Logic Pro X</a>&nbsp;&gt;</p>
			</div>
			<div class="col-lg-3">
				<img src="images/main.png"/>
				<h2>MainStage 3</h2>
				<h3>将你的 Mac 变身现场演出装<br>备，令观众耳目一新，难以忘怀。</h3>
				<p><a href="#">进一步了解&nbsp;</a><br><a href="#">MainStage 3</a>&nbsp;&gt;</p>
			</div>
		</div>
	</div>
<!--footer-->
<footer>
	<div class="container buy">
		<p>1. 仅限新会员。需要注册。当试用期结束后，会员资格将按月自动续订。<br>
		   2. 目前仅在部分第三方授权经销商处有售。</p>
		<div class="row">
			<h4 class="iconfont" style="padding-left:15px;">&#xe602;&nbsp;&gt;&nbsp;Music</h4>
			<div class="col-lg-2">
				<h3>选购及了解</h3>
				<ul>
					<li><a href="#">Mac</a></li>
					<li><a href="#">iPad</a></li>
					<li><a href="#">iPhone</a></li>
					<li><a href="#">Watch</a></li>
					<li><a href="#">Music</a></li>
					<li><a href="#">iTunes</a></li>
					<li><a href="#">iPod</a></li>
					<li><a href="#">配件</a></li>
					<li><a href="#">APP&nbsp;Store充值卡</a></li>
				</ul>
			</div>
			<div class="col-lg-3" style="padding-left:30px;">
				<h3>Apple Store 商店</h3>
				<ul>
					<li><a href="#">查找零售店</a></li>
					<li><a href="#">Genius Bar 天才吧</a></li>
					<li><a href="#">讲座和学习</a></li>
					<li><a href="#">青少年活动</a></li>
					<li><a href="#">Apple Store App</a></li>
					<li><a href="#">翻新和优惠</a></li>
					<li><a href="#">分期付款</a></li>
					<li><a href="#">重复使用和循环利用</a></li>
					<li><a href="#">订单状态</a></li>
					<li><a href="#">选购帮助</a></li>
				</ul>
			</div>
			<div class="col-lg-2">
				<h3>教育与应用</h3>
				<ul>
					<li><a href="#">Apple 与教育</a></li>
					<li><a href="#">高校师生选购</a></li>
				</ul>
				<h3>商务应用</h3>
				<ul>
					<li><a href="#">Apple 与商务</a></li>
					<li><a href="#">商务选购</a></li>
				</ul>
			</div>
			<div class="col-lg-2">
				<h3>账户</h3>
				<ul>
					<li><a href="#">管理你的Apple ID</a></li>
					<li><a href="#">Apple store账户</a></li>
					<li><a href="#">iCloud.com</a></li>
				</ul>
				<h3>Apple 价值观</h3>
				<ul>
					<li><a href="#">辅助功能</a></li>
					<li><a href="#">环境责任</a></li>
					<li><a href="#">隐私</a></li>
					<li><a href="#">供应商责任</a></li>
				</ul>
			</div>
			<div class="col-lg-2">
				<h3>关于Apple</h3>
				<ul>
					<li><a href="#">Apple资讯</a></li>
					<li><a href="#">工作机会</a></li>
					<li><a href="#">媒体资讯</a></li>
					<li><a href="#">活动</a></li>
					<li><a href="#">联系Apple</a></li>
				</ul>
			</div>	
		</div>
		<p>更多选购方式：前往<a href="#"> Apple Store</a> 零售店，致电 400-666-8800 或查找在你附近的<a href="#">授权经销商</a>。</p>
		<div class="privice" style="margin-bottom:25px;">
			<span style="color:#888;margin-right:30px;">Copyright © 2017 Apple Inc. 保留所有权利。</span>
			<a href="#">隐私政策</a>
			<a href="#">使用条款</a>
			<a href="#">销售政策</a>
			<a href="#">法律信息</a>
			<a href="#">网站地图</a>
			<span style="float:right;"><a href="#" style="border:0;padding:0;margin:0;"><img src="images/16.png"/>&nbsp;中国</a></span>
		</div>
	</div>
</footer>
	<script src="js/text.js" type="text/javascript"></script>
	</body>
</html>
